<template>
  <div class="progress">
    <div class="firstStep">
      <div class="one" v-if="props.modelValue === 1">1</div>
      <div v-else>
        <el-icon :style="{ fontSize: size + 'px' }" color="#FF6B00">
          <CircleCheckFilled />
        </el-icon>
      </div>
      <div class="text">{{progress[0] || '配置店铺信息'}}</div>
    </div>
    <div class="line-active"></div>

    <div class="nextStep" v-if="props.type === 3">
      <div class="step-num" :class="{'step-num-active': props.modelValue === 2}" v-if="props.modelValue < 3">2</div>
      <div v-else>
        <el-icon :style="{ fontSize: size + 'px' }" color="#FF6B00">
          <CircleCheckFilled />
        </el-icon>
      </div>
      <div class="text" :class="{active: props.modelValue > 1}">{{progress[1] || '店铺授权'}}</div>
    </div>
    <div class="line" :class="{'line-active': props.modelValue ===3}" v-if="props.type === 3"></div>

    <div class="nextStep">
      <div class="step-num" v-if="props.modelValue < props.type">{{props.type}}</div>
      <div v-else>
        <el-icon :style="{ fontSize: size + 'px' }" color="#FF6B00">
          <CircleCheckFilled />
        </el-icon>
      </div>
      <div class="text" :class="{active: props.modelValue === props.type}">{{progress[2] || '完成'}}</div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue'
import Dialog from '@/components/Dialog.vue'
import selectStoreType from './selectStoreType.vue'

const size = ref<number>(30)

interface Props {
  modelValue: number,   // 1 第一步  2 第二步  3 第三步
  type: number,    //  2 分两步   3 分三步
  progress?: string[]   // 各步骤名称
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: 1,
    type: 2,
    progress: ()=>[]
})
const emit = defineEmits(['update:modelValue'])

</script>
<style scoped lang="scss">
$length: 32px;
.progress{
    display: flex;
      align-items: center;
    .firstStep{
      display: flex;
      align-items: center;
      .one{
        width: $length;
        height: $length;
        line-height: $length;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        background-color: #FF6B00;
      }
      .text{
        color: #FF6B00;
        text-indent: 6px;
        white-space: nowrap;
      }
    }
    .nextStep{
      display: flex;
      align-items: center;
      .step-num{
        width: $length;
        height: $length;
        line-height: $length;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        background-color: #ddd;
      }
      .step-num-active{
        color: #fff;
        background-color: #FF6B00;
      }
      .text{
        text-indent: 6px;
        white-space: nowrap;
      }
      .active{
        color: #FF6B00;
      }

    }
    .line{
      width: 200px;
      height: 0;
      margin: 0 10px;
      border-top: 1px dashed #ccc;
    }
    .line-active{
      width: 200px;
      height: 0;
      margin: 0 10px;
      border-top: 1px dashed #FF6B00;
    }

  }
</style>
